﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "供应商管理";
    Layout = null;
}

<div class="page-container">
<div class="layui-card">
    <div class="layui-card-header">
        <h2><i class="layui-icon layui-icon-template"></i> 供应商管理</h2>
    </div>
    <div class="layui-card-body">
        <!-- 查询表单 -->
        <form class="layui-form layui-form-pane" lay-filter="searchForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">供应商编码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="supplierCode" placeholder="请输入供应商编码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">供应商名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="supplierName" placeholder="请输入供应商名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">供应商等级</label>
                    <div class="layui-input-inline">
                        <select name="supplierGrade" lay-search>
                            <option value="">请选择供应商等级</option>
                            <option value="优秀">优秀</option>
                            <option value="良好">良好</option>
                            <option value="一般">一般</option>
                            <option value="较差">较差</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">是否启用</label>
                    <div class="layui-input-inline">
                        <select name="isEnable">
                            <option value="">请选择状态</option>
                            <option value="true">启用</option>
                            <option value="false">禁用</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">供应商电话</label>
                    <div class="layui-input-inline">
                        <input type="text" name="supplierPhone" placeholder="请输入供应商电话" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchBtn">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                    <button type="button" class="layui-btn layui-btn-normal" onclick="addSupplier()">
                        <i class="layui-icon layui-icon-add-1"></i> 新增
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 数据表格 -->
<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-hide" id="supplierTable" lay-filter="supplierTable"></table>
    </div>
</div>

<!-- 表格操作列模板 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit" title="编辑">
        <i class="layui-icon layui-icon-edit"></i> 编辑
    </a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" title="删除">
        <i class="layui-icon layui-icon-delete"></i> 删除
    </a>
</script>

<!-- 启用状态模板 -->
<script type="text/html" id="enableTpl">
    {{# if(d.isEnable === true) { }}
        <span class="layui-badge layui-bg-green">启用</span>
    {{# } else { }}
        <span class="layui-badge layui-bg-red">禁用</span>
    {{# } }}
</script>

<!-- 添加/编辑供应商弹窗 -->
<div id="supplierForm" style="display: none; padding: 20px;">
    <form class="layui-form" lay-filter="supplierForm">
        <input type="hidden" name="id" />
        <div class="layui-form-item">
            <label class="layui-form-label">供应商编码</label>
            <div class="layui-input-block">
                <div class="layui-input-inline" style="width: 70%;">
                    <input type="text" name="supplierCode" id="supplierCodeInput" required lay-verify="required" placeholder="请输入供应商编码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline" style="width: 25%; margin-left: 10px; display: flex; align-items: center;">
                    <input type="checkbox" name="autoGenerate" id="autoGenerateSwitch" lay-skin="switch" lay-text="自动生成|手动输入" checked lay-filter="autoGenerateFilter">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">供应商名称</label>
            <div class="layui-input-block">
                <input type="text" name="supplierName" required lay-verify="required" placeholder="请输入供应商名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">供应商等级</label>
            <div class="layui-input-block">
                <select name="supplierGrade" required lay-verify="required">
                    <option value="">请选择供应商等级</option>
                    <option value="优秀">优秀</option>
                    <option value="良好">良好</option>
                    <option value="一般">一般</option>
                    <option value="较差">较差</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">供应商评分</label>
            <div class="layui-input-block">
                <input type="number" name="supplierScore" placeholder="请输入供应商评分(0-100)" min="0" max="100" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">供应商电话</label>
            <div class="layui-input-block">
                <input type="text" name="supplierPhone" lay-verify="phone" placeholder="请输入供应商电话" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">供应商地址</label>
            <div class="layui-input-block">
                <textarea name="supplierAdress" placeholder="请输入供应商地址" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="context" placeholder="请输入备注信息" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-block">
                <input type="radio" name="isEnable" value="true" title="启用" checked>
                <input type="radio" name="isEnable" value="false" title="禁用">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="supplierSubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<link rel="stylesheet" href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" />
<script src="~/libs/jquery/jquery.js"></script>
<style>
    body {
        margin: 0;
        padding: 10px;
        background-color: #f5f5f5;
    }
    .layui-card {
        margin-bottom: 15px;
    }
    .layui-form-pane .layui-form-item {
        margin-bottom: 15px;
    }
    .layui-table-view {
        margin-top: 15px;
    }
    .layui-badge {
        border-radius: 12px;
        padding: 3px 8px;
        font-size: 12px;
    }
    .page-container {
        max-width: 100%;
        height: calc(100vh - 40px);
        overflow-y: auto;
    }
    .layui-disabled {
        background-color: #f8f8f8 !important;
        color: #999 !important;
        cursor: not-allowed !important;
    }
    .layui-form-switch {
        margin-top: 5px;
    }
</style>

<script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
<script>
        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;

            // 初始化表格
            table.render({
                elem: '#supplierTable',
                url: '/ProductionSystem/SupplierModel/GetSupplierList', // 后端API地址
                page: true,
                height: 'full-320',
                request: {
                    pageName: 'page',
                    limitName: 'limit'
                },
                response: {
                    statusName: 'code',
                    statusCode: 0,
                    msgName: 'msg',
                    countName: 'count',
                    dataName: 'data'
                },
                parseData: function(res) {
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.count,
                        "data": res.data
                    };
                },
                cols: [[
                    { field: 'id', title: 'ID', width: 80, sort: true, hide: true },
                    { field: 'supplierCode', title: '供应商编码', width: 150, align: 'center' },
                    { field: 'supplierName', title: '供应商名称', width: 150, align: 'center' },
                    { field: 'supplierGrade', title: '供应商等级', width: 150, align: 'center' },
                    { field: 'supplierScore', title: '供应商评分', width: 150, align: 'center' },
                    { field: 'supplierPhone', title: '供应商电话', width: 150, align: 'center' },
                    { field: 'supplierAdress', title: '供应商地址', width: 200, align: 'center'},
                    { field: 'isEnable', title: '是否启用', width: 100, align: 'center', templet: '#enableTpl' },
                    { field: 'context', title: '备注', width: 150, align: 'center' },
                    { title: '操作', fixed: 'right', toolbar: '#tableBar', width: 150, align: 'center' }
                ]]
            });

            // 监听搜索
            form.on('submit(searchBtn)', function (data) {
                table.reload('supplierTable', {
                    where: {
                        supplierCode: data.field.supplierCode || '',
                        supplierName: data.field.supplierName || '',
                        supplierGrade: data.field.supplierGrade || '',
                        supplierPhone: data.field.supplierPhone || '',
                        isEnable: data.field.isEnable || null
                    },
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            // 监听工具条
            table.on('tool(supplierTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('确定删除此供应商？', function (index) {
                        $.ajax({
                            url: '/ProductionSystem/SupplierModel/DeleteSupplier',
                            type: 'DELETE',
                            data: { id: data.id },
                            success: function (res) {
                                if (res.success) {
                                    layer.msg('删除成功');
                                    obj.del();
                                } else {
                                    layer.msg('删除失败：' + res.message);
                                }
                            },
                            error: function () {
                                layer.msg('删除失败，请稍后重试');
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    editSupplier(data);
                }
            });

            // 监听自动生成开关
            form.on('switch(autoGenerateFilter)', function(data){
                var isChecked = data.elem.checked;
                var codeInput = document.getElementById('supplierCodeInput');
                
                if(isChecked) {
                    // 开启自动生成：禁用输入框并生成编码
                    codeInput.disabled = true;
                    codeInput.classList.add('layui-disabled');
                    generateSupplierCode();
                } else {
                    // 关闭自动生成：启用输入框
                    codeInput.disabled = false;
                    codeInput.classList.remove('layui-disabled');
                    codeInput.focus();
                }
            });

            // 监听提交
            form.on('submit(supplierSubmit)', function (data) {
                var isEdit = data.field.id && Number(data.field.id) > 0;
                var url = isEdit ? '/ProductionSystem/SupplierModel/UpdateSupplier' : '/ProductionSystem/SupplierModel/CreateSupplier';
                var type = isEdit ? 'PUT' : 'POST';
                
                // 转换布尔值
                data.field.isEnable = data.field.isEnable === 'true';
                data.field.supplierScore = parseInt(data.field.supplierScore) || 0;
                
                // 添加时不传Id字段
                if (!isEdit) {
                    delete data.field.id;
                }
                
                $.ajax({
                    url: url,
                    type: type,
                    contentType: 'application/json',
                    data: JSON.stringify(data.field),
                    success: function (res) {
                        if (res.success) {
                            layer.closeAll();
                            layer.msg(isEdit ? '修改成功' : '添加成功');
                            table.reload('supplierTable');
                        } else {
                            layer.msg(res.message || '操作失败');
                        }
                    },
                    error: function () {
                        layer.msg('操作失败，请稍后重试');
                    }
                });
                return false;
            });
        });

        // 添加供应商
        function addSupplier() {
            layer.open({
                type: 1,
                title: '添加供应商',
                area: ['600px', '600px'],
                content: $('#supplierForm'),
                success: function () {
                    // 清空表单
                    document.getElementById('supplierForm').querySelector('form').reset();
                    layui.form.val('supplierForm', {
                        id: null,
                        supplierCode: '',
                        supplierName: '',
                        supplierGrade: '',
                        supplierScore: 0,
                        supplierPhone: '',
                        supplierAdress: '',
                        context: '',
                        isEnable: 'true'
                    });
                    
                    // 设置开关为开启状态
                    var autoSwitch = document.getElementById('autoGenerateSwitch');
                    autoSwitch.checked = true;
                    
                    layui.form.render();
                    
                    // 初始化状态：禁用输入框并自动生成编码
                    var codeInput = document.getElementById('supplierCodeInput');
                    codeInput.disabled = true;
                    codeInput.classList.add('layui-disabled');
                    generateSupplierCode();
                }
            });
        }

        // 编辑供应商
        function editSupplier(data) {
            layer.open({
                type: 1,
                title: '编辑供应商',
                area: ['600px', '600px'],
                content: $('#supplierForm'),
                success: function () {
                    layui.form.val('supplierForm', {
                        id: data.id,
                        supplierCode: data.supplierCode,
                        supplierName: data.supplierName,
                        supplierGrade: data.supplierGrade,
                        supplierScore: data.supplierScore,
                        supplierPhone: data.supplierPhone,
                        supplierAdress: data.supplierAdress,
                        context: data.context,
                        isEnable: data.isEnable.toString()
                    });
                    
                    // 编辑时关闭自动生成，允许手动修改
                    var autoSwitch = document.getElementById('autoGenerateSwitch');
                    autoSwitch.checked = false;
                    
                    layui.form.render();
                    
                    // 启用输入框，允许编辑编码
                    var codeInput = document.getElementById('supplierCodeInput');
                    codeInput.disabled = false;
                    codeInput.classList.remove('layui-disabled');
                }
            });
        }

        // 自动生成供应商编码
        function generateSupplierCode() {
            $.ajax({
                url: '/ProductionSystem/SupplierModel/GenerateSupplierCode',
                type: 'GET',
                success: function (res) {
                    if (res.success) {
                        $('input[name="supplierCode"]').val(res.code);
                        layer.msg('编码生成成功', { icon: 1, time: 1000 });
                    } else {
                        layer.msg('编码生成失败：' + res.message, { icon: 2 });
                    }
                },
                error: function () {
                    layer.msg('编码生成失败，请稍后重试', { icon: 2 });
                }
            });
        }
    </script>
</div>
